<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      v-show="showSearch"
      :inline="true"
      label-width="88px"
    >
      <el-form-item
        label="年筛选"
        prop="accYear"
      >
        <el-date-picker
          v-model="queryParams.accYear"
          type="year"
          placeholder="请选择年份"
          format="YYYY"
          value-format="YYYY"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item
        label="月筛选"
        prop="accYearMonth"
      >
        <el-date-picker
          v-model="queryParams.accYearMonth"
          type="month"
          placeholder="请选择月份"
          format="YYYY-MM"
          value-format="YYYY-MM"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="Search"
          @click="handleQuery"
        >搜索</el-button>
        <el-button
          icon="Refresh"
          @click="resetQuery"
        >重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 统计图表 -->
    <el-row
      :gutter="20"
      class="mb20"
    >
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>门户访问趋势</span>
              <el-tag
                type="info"
                v-if="queryParams.accYear"
              >{{ queryParams.accYear }}年</el-tag>
              <el-tag
                type="info"
                v-if="queryParams.accYearMonth"
              >{{ queryParams.accYearMonth }}</el-tag>
            </div>
          </template>
          <div
            ref="chartContainer"
            style="height: 400px"
          ></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 表格数据 -->
    <el-table
      v-loading="loading"
      :data="statisticsList"
    >
      <el-table-column
        label="序号"
        type="index"
        width="60"
        align="center"
      />
      <el-table-column
        label="日期"
        prop="textContet"
        :show-overflow-tooltip="true"
        width="150"
        align="center"
      />
      <el-table-column
        label="访问次数"
        prop="count"
        width="120"
        align="center"
      >
        <template #default="scope">
          <el-tag :type="scope.row.count > 5 ? 'success' : scope.row.count > 0 ? 'warning' : 'info'">
            {{ scope.row.count }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="访问热度"
        align="center"
        width="200"
      >
        <template #default="scope">
          <el-progress
            :percentage="getHeatPercentage(scope.row.count)"
            :color="getHeatColor(scope.row.count)"
            :stroke-width="15"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="统计说明"
        align="center"
      >
        <template #default="scope">
          <span v-if="scope.row.count === 0">无访问记录</span>
          <span v-else-if="scope.row.count < 3">访问量较少</span>
          <span v-else-if="scope.row.count < 10">访问量正常</span>
          <span v-else>访问量较高</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="ProductStatistics">
import { getAccessRecords } from '@/api/statistics'
import { nextTick } from 'vue'
import * as echarts from 'echarts'

const { proxy } = getCurrentInstance()

const statisticsList = ref([])
const loading = ref(true)
const showSearch = ref(true)
const total = ref(0)
const chartContainer = ref()
let chart = null

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 50,
    accYear: undefined,
    accYearMonth: undefined
  }
})

const { queryParams } = toRefs(data)

/** 查询门户访问统计列表 */
function getList() {
  loading.value = true
  getAccessRecords(queryParams.value)
    .then((response) => {
      statisticsList.value = response.rows || []
      total.value = response.total || 0
      loading.value = false
      // 更新图表
      nextTick(() => {
        initChart()
      })
    })
    .catch(() => {
      loading.value = false
    })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

/** 计算访问热度百分比 */
function getHeatPercentage(count) {
  const maxCount = Math.max(...statisticsList.value.map((item) => item.count))
  return maxCount > 0 ? Math.round((count / maxCount) * 100) : 0
}

/** 获取热度颜色 */
function getHeatColor(count) {
  if (count > 5) return '#67c23a'
  if (count > 0) return '#e6a23c'
  return '#909399'
}

/** 初始化图表 */
function initChart() {
  if (!chartContainer.value) return

  if (chart) {
    chart.dispose()
  }

  chart = echarts.init(chartContainer.value)

  const option = {
    title: {
      text: '门户访问统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    xAxis: {
      type: 'category',
      data: statisticsList.value.map((item) => item.textContet)
    },
    yAxis: {
      type: 'value',
      name: '访问次数'
    },
    series: [
      {
        name: '访问次数',
        type: 'line',
        data: statisticsList.value.map((item) => item.count),
        smooth: true,
        itemStyle: {
          color: '#409EFF'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(64, 158, 255, 0.6)'
              },
              {
                offset: 1,
                color: 'rgba(64, 158, 255, 0.1)'
              }
            ]
          }
        }
      }
    ],
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    }
  }

  chart.setOption(option)
}

// 组件销毁时清理图表
onUnmounted(() => {
  if (chart) {
    chart.dispose()
  }
})

getList()
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mb20 {
  margin-bottom: 20px;
}
</style>
